<template>
  <div class="task-detail">
    <!-- 基本信息 -->
    <div class="info-section">
      <h4 class="section-title">基本信息</h4>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">任务类型:</span>
          <span class="value">{{ taskData.task_type?.name || '未知' }}</span>
        </div>
        <div class="info-item">
          <span class="label">客户:</span>
          <span class="value">{{ taskData.customer?.fullname || '未知' }}</span>
        </div>
        <div class="info-item">
          <span class="label">跟进人:</span>
          <span class="value">{{ taskData.follower?.username || '未知' }}</span>
        </div>
        <div class="info-item">
          <span class="label">任务状态:</span>
          <el-tag :type="statusType" size="small">
            {{ statusText }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 时间信息 -->
    <div class="info-section">
      <h4 class="section-title">时间信息</h4>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">完成时间:</span>
          <span class="value">{{ completedTime }}</span>
        </div>
        <div class="info-item">
          <span class="label">截止时间:</span>
          <span class="value">{{ deadlineTime }}</span>
        </div>
      </div>
    </div>

    <!-- 反馈内容 -->
    <div class="info-section">
      <h4 class="section-title">反馈内容</h4>
      <div class="feedback-content">
        {{ taskData.feedback_text || '无反馈内容' }}
      </div>
    </div>

    <!-- 反馈图片 -->
    <div v-if="taskData.feedback_images && taskData.feedback_images.length > 0" class="info-section">
      <h4 class="section-title">反馈图片</h4>
      <div class="image-gallery">
        <div 
          v-for="(image, index) in taskData.feedback_images" 
          :key="index"
          class="image-item"
          @click="previewImage(image.url)"
        >
          <img :src="image.url" :alt="image.name" />
          <div class="image-overlay">
            <el-icon><ZoomIn /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ElTag, ElIcon } from "element-plus";
import { ZoomIn } from "@element-plus/icons-vue";

const props = defineProps<{
  taskData: {
    id: number;
    status: number;
    task_type?: {
      name: string;
    };
    customer?: {
      fullname: string;
    };
    follower?: {
      username: string;
    };
    completed_at?: number;
    deadline_at?: number;
    feedback_text?: string;
    feedback_images?: Array<{
      id: number;
      url: string;
      name: string;
    }>;
  };
}>();

// 状态相关计算属性
const statusText = computed(() => {
  return props.taskData.status === 1 ? "已完成" : "超时完成";
});

const statusType = computed(() => {
  return props.taskData.status === 1 ? "success" : "warning";
});

// 时间格式化
const completedTime = computed(() => {
  return props.taskData.completed_at 
    ? new Date(props.taskData.completed_at * 1000).toLocaleString()
    : "-";
});

const deadlineTime = computed(() => {
  return props.taskData.deadline_at 
    ? new Date(props.taskData.deadline_at * 1000).toLocaleString()
    : "-";
});

// 图片预览
function previewImage(url: string) {
  window.open(url, '_blank');
}
</script>

<style lang="scss" scoped>
.task-detail {
  max-width: 600px;
  
  .info-section {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .section-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    border-bottom: 1px solid var(--el-border-color-light);
    padding-bottom: 6px;
  }
  
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    
    @media (max-width: 480px) {
      grid-template-columns: 1fr;
    }
  }
  
  .info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    .label {
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }
    
    .value {
      font-size: 14px;
      color: var(--el-text-color-primary);
      font-weight: 500;
    }
  }
  
  .feedback-content {
    background: var(--el-fill-color-light);
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    padding: 12px;
    min-height: 60px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--el-text-color-primary);
    word-break: break-word;
  }
  
  .image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .image-item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      
      .image-overlay {
        opacity: 1;
      }
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      
      .el-icon {
        color: white;
        font-size: 20px;
      }
    }
  }
}
</style> 